figure.Tamiz = new Class({
    Extends: figure.DomFigure,

    initialize: function(id, css) {
        this.parent(id);
        this.createElement('canvas', {
            id: id,
            Width: 100,
            Height: 100,
            css: css
        });
        this.element = this.getElement();
        this.writeTag(css.top + 1.3 * figure.tamizSizes.HEIGHT, css.left + figure.tamizSizes.WIDTH / 2)
    },

    draw: function() {
        var ctx = this.element[0].getContext('2d');

        var x = 0;
        var y = 0;
        var height = figure.tamizSizes.HEIGHT;
        //var radius = 0;
        var width = figure.tamizSizes.WIDTH;
        ctx.beginPath();

        ctx.stroke();
        ctx.moveTo(x , y);
        ctx.lineTo(x + width, y);
        ctx.lineTo(x + width, y + height);
        ctx.lineTo(x, y + height);
        ctx.lineTo(x, y);
        ctx.moveTo(x + width/12, y + height);
        ctx.lineTo(x + width/12, y + height + width/16);
        ctx.lineTo(x + width*2/12, y + height + width/16);
        ctx.lineTo(x + width*2/12, y + height);

        ctx.moveTo(x + width*10/12, y + height);
        ctx.lineTo(x + width*10/12, y + height + width/16);
        ctx.lineTo(x + width*11/12, y + height + width/16);
        ctx.lineTo(x + width*11/12, y + height);

        ctx.moveTo(x + width*3/12, y + height);
        ctx.lineTo(x + width*3/12, y + height + width*2/16);
        ctx.lineTo(x + width*6/12, y + height + width*2/16);
        ctx.lineTo(x + width*6/12, y + height);

        ctx.fillStyle = this._createGradient(ctx);
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
    },

    _createGradient: function(context) {
        var grd = context.createLinearGradient(10,2,65,10);
        grd.addColorStop(0,"white");
        grd.addColorStop(1, figure.tamizColor);
        return grd;
    }

});
